<template>
	<view>
		<!-- 页首 -->
		<zw-header></zw-header>

		<!-- 面包屑 -->
		<bread-crumb pages="交易订单" separator="/"></bread-crumb>

		<!-- 左侧导航栏 -->
		<menu-wrapper active-index="1-3">
			
			<!-- 订单筛选栏 -->
			<view class="filter-wrap">
				<view class="status-wrap">
					<block v-for="(item, index) in statuses" :key="index">
						<view :class="['status', {'active': index == statusIndex}]" @click="switchStatus(index,item.status)">
							{{item.name}}
						</view>
					</block>
				</view>
				
			</view>
			<!-- 订单列表 -->
			<view v-if="orderList.length > 0" class="order-wrap">
				<block v-for="(item, index) in orderList" :key="index">
					<view :class="['order', {'warning': item.status == 0 || item.status == 2}, {'green': item.status > 2 && item.status <= 6}]">
						<view class="header-wrap">
							<view class="top">
								<view class="status">{{item.statusDesc}}</view>
							</view>
							<view class="bottom">
								<view class="left">
									<view class="detail">{{item.createTime | filterTime}}</view>
									<view class="separator">|</view>
									<view class="detail">普通商品</view>
									<view class="separator">|</view>
									<view class="detail">
										订单号：
										<navigator class="orderno" :url="`/pages/order/detail?orderNo=${item.orderId}`">{{item.orderNumber}}</navigator>
									</view>
									<block v-if="item.payMode">
										<view class="separator">|</view>
										<view class="detail">{{item.payMode}}</view>
									</block>
								</view>
								<view class="right">
									<text class="desc">实付金额：</text>
									<text class="amount">{{item.orderAmount.toFixed(2)}}</text>
									<text class="desc">元</text>
								</view>
							</view>
						</view>
						<view class="main-wrap">
							<view class="left">
								<view class="goods" v-for="(goods, goodsIndex) in item.details" :key="goodsIndex">
									<a :href="`#/pages/goods/index?id=${goods.productId}`" target="_blank">
										<image class="thumb" :src="goods.logo" mode="aspectFit"></image>
									</a>
									<view class="detail">
										<a class="name elip" :href="`#/pages/goods/index?id=${goods.productId}`" target="_blank">
											{{goods.productName}}
										</a>
										<view class="text">{{goods.skuName}}</view>
										<view class="more"><text>{{goods.price}}元</text> x {{goods.number}}</view>
									</view>
								</view>
							</view>
							<view class="right">
								<view v-if="item.status == 0" class="btn btn-primary" @click="toPay(item)">立即付款</view>
								<view v-if="item.status == 3" class="btn btn-primary" @click="receiveGoods(item.orderId)">确认收货</view>
								<navigator  class="btn btn-primary" v-if="item.status==5" :url="`/pages/order/comment/detail?orderNo=${item.orderId}`">去评价</navigator>
								<view class="btn btn-primary" v-if="item.status==1" @click='apply(item)'>申请退款</view>
								<view class="btn" v-if="item.status==0" @click="cancel(item.orderId)">关闭订单</view>
								<navigator class="btn" v-if="item.status==3" :url="`/pages/order/detail?orderNo=${item.orderId}`">查看物流</navigator>
								<navigator class="btn" :url="`/pages/order/detail?orderNo=${item.orderId}`">订单详情</navigator>
								<!-- <navigator v-if="item.status == 5 && !item.combinationId" class="btn btn-primary" :url="`/pages/order/comment/detail?orderNo=${item.id}`">去评价</navigator> -->
								<view v-if="item.status ==2" class="btn">订单已取消</view>
							</view>
						</view>
					</view>
				</block>

				<!-- 分页条 -->
				<pagination :pageNumber="pageNumber" :totalSize="totalSize" @change="pageChange"></pagination>
			</view>
			
			<!-- 没有数据提示 -->
			<view v-else class="empty-tip">暂未查询到相关订单记录。</view>
			
		</menu-wrapper>
<!-- 退款申请弹窗 -->
			<zw-dialog :hidden="showRefund" title="退款" :width="450" :height="200" :showHeaderBg="false" :hideFooter="false"
			 :showFooterBg="false" borderRadius @close="showRefund = true" @cancel="showRefund = true" @confirm="orderRefund">
				<view class="form-wrap" @keydown.enter="submit">
					<view class="row">
						<view class="tit">退款理由:</view>
						 <uni-data-select
						      v-model="value"
						      :localdata="range"
						      @change="change"
						    ></uni-data-select>
					</view>
					<view class="row">
						<view class="tit">退款金额:</view>
						<text><text style="font-size: 17px;">￥</text>{{Number(refundGoods.payAmount).toFixed(2)}}</text>
					</view>
				</view>
			</zw-dialog>
		<!-- 页脚 -->
		<zw-footer ></zw-footer>
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import pagination from '@/components/common/pagination.vue';

	export default {
		components: {
			menuWrapper,
			pagination
		},
		data() {
			return {
				statuses: [
					{name:'全部订单',status:-1},{name:'待付款',status:0},{name:'待发货',status:1},{name:'待收货',status:3},
					{name:'售后',status:4},{name:'待评价',status:5},{name:'已完成',status:6},
				],
				statusIndex: 0,
				orderList: [],
				keyword: '',
				pageNumber: 1,
				totalSize: 0,
				bottom: false,
				nullInfo: false,
				numbers: 1,
				sellerId:'',
				clickFlag:false,
				status:-1,//待付款0   待发货1 已取消2  待收货3 售后4 待评价5 已完成6 -1全部
				flag:true,
				showRefund:true,
				range: [
					{ value: 0, text: "订单信息拍错" },
					{ value: 1, text: "我不想要了" },
					{ value: 2, text: "地址/电话信息填错" },
					{ value: 3, text: "发货太慢" },
					{ value: 4, text: "缺货" },
				],
				refundGoods:'',
				value:'',
			}
		},
		filters: {
			filterTime(datetime) {
				const units = ['年', '月', '日'];
				datetime = datetime.split(' ');
				return datetime[0].split('-').map((e, i) => e + units[i]).join('') + ' ' + datetime[1];
			}
		},
		onLoad(e) {
			if (e.status) {
				try {
					const status = Number(e.status);
					if (status > 0 && status <= 4) {
						this.statusIndex = status;
					}
				} catch (e) {
					console.error(e);
				}
			}

			this.findOrders();
		},
		methods: {
			change(e) {
				this.value = e
			},
			//退款
			apply(item){
				
				this.showRefund = false
				this.refundGoods = item
			},
			orderRefund() {
				if(this.value == ''){
					uni.showToast({
						icon:'none',
						title:'请选择退款理由'
					})
					return
				}
				this.$alert('确定申请退款吗？', {}, () => {
					uni.showLoading({
						title: '提交中...',
						mask: true
					});
					this.uni_request({
						url: '/user/order/refund/'+this.refundGoods.id,
						method: 'POST',
						data:{
							refundReason:this.range[this.value].text
						},
						success: (res) => {
							uni.hideLoading()
							if (res.data.code == 0 || res.data.code == 200) {
								this.showRefund = true
								this.orderList = []
								this.findOrders();
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
							}
						}
					})
					
				});
			},
			
			// 总价
			totalPrice(item) {
				let price = 0;
				for (var i = 0; i < item.length; i++) {
					price = Number(item[i].number * item[i].price + price)
				}
				return price.toFixed(2);
			},
			//立即付款
			toPay(item) {
				if(item.type == 0){
					var price = this.totalPrice(item.detailList)
					var now = Date.parse(new Date());
					var end = Date.parse(new Date(item.overTime));
					if(now<end){
						uni.navigateTo({
							url: '/pages/order/pay/index?orderId=' + item.id + '&price=' + price + '&name=' + item.detailList[0]
								.productName+'&time='+item.overTime+'&type=0'
						})
					}else{
						uni.showToast({
							title:'订单支付时间已过，暂不可支付',
							icon:'none'
						})
					}
					
				}else{
					var price = item.orderAmount * this.numbers
					var now = Date.parse(new Date());
					var end = Date.parse(new Date(item.overTime));
					if(now<end){
						uni.navigateTo({
							url: '/pages/order/pay/index?orderId=' + item.id + '&price=' + price + '&name=' + item.combinationName+'&time='+item.overTime+'&type=1'
						})
					}else{
						uni.showToast({
							title:'订单支付时间已过，暂不可支付',
							icon:'none'
						})
					}
					
				}
				
			},
			findOrders() {
				var that = this
				if(!that.flag){
					return
				}
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				this.flag = false;
				var params = {
					pageNum: that.pageNumber,
					pageSize: 10,
				}
				if(that.status>-1){
					params.status = that.status
				}
				this.uni_request({
					url: '/user/order/list',
					method: 'POST',
					data: params,
					success: (res) => {
						uni.hideLoading()
						that.flag = true
						if (res.data.code == 0 || res.data.code == 200) {
							that.totalSize = res.data.total;
							var data = res.data.rows;
							for (var i = 0; i < data.length; i++) {
								that.orderList.push(data[i]);
							}
							if (that.orderList.length == 0) {
								that.nullInfo = true
							} else {
								that.nullInfo = false
							}
							
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
				
			},
			switchStatus(index,status) {
				this.statusIndex = index;
				this.status = status;
				this.pageNumber = 1;
				this.orderList = [];
				this.findOrders();
			},
			//关闭订单
			cancel(id){
				this.uni_request({
					url: '/user/order/cancel/'+id,
					method: 'GET',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
							this.switchStatus(0,-1)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			},
			//确认收货
			receiveGoods(id){
				if(this.clickFlag){
					return
				}
				this.$alert('确定已收货吗？', {}, () => {
					this.clickFlag = true
					uni.showLoading({
						title:'加载中',
						mask: true
					})
					this.uni_request({
						url: '/user/order/receiveGoods/'+id,
						method: 'POST',
						success: (res) => {
							this.clickFlag = false
							uni.hideLoading()
							if (res.data.code == 0 || res.data.code == 200) {
								this.pageNumber = 1;
								this.orderList = [];
								this.findOrders();
								
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								})
							}
						}
					})
					
				});
				
			},
			
			pageChange(e) {
				this.pageNumber = e;
				this.orderList = [];
				this.findOrders();
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			}
		}
	}
</script>

<style lang="scss">
	.form-wrap{
		width: 100%;
		margin: 0 20px;
		padding: 30px 20px 0;
		border-top: 1px solid $border-color;
		.row{
			@extend %flex-align-center;
			justify-content: space-between;
			margin-bottom: 20px;
			.tit{
				font-size: 15px;margin-right: 20px;
			}
			text{color: #e93933;font-size: 23px;}
		}
	}
	.popBox{
		width: 50vw;
	}
	.title {
		font-size: 30px;
		color: #757575;
		line-height: 68px;
	}

	.filter-wrap {
		padding: 16px 0;
		@extend %flex-align-center;
		justify-content: space-between;

		.status-wrap {
			@extend %flex-align-center;

			.status {
				font-size: 16px;
				line-height: 1.25;
				padding: 0 20px;
				border-left: 1px solid #e0e0e0;
				color: #757575;
				cursor: pointer;

				&:first-child {
					border-left: none;
					padding-left: 0;
				}

				&:hover {
					color: $text-color;
				}

				&.active {
					color: $color-primary;
				}
			}
		}

		.search-wrap {
			@extend %flex-align-center;

			&:hover {

				.input-search,
				.btn-search {
					border-color: #b0b0b0;
				}
			}

			.input-search {
				width: 189px;
				height: 40px;
				line-height: 40px;
				padding: 0 15px;
				border: 1px solid $border-color;
				font-size: 12px;
				color: #757575;
				transition: all .2s;
			}

			.btn-search {
				width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				cursor: pointer;
				transition: all .2s;
				margin-left: -1px;
				border: 1px solid $border-color;

				.i-search {
					color: #616161;
					font-size: 18px;
					font-weight: bold;
				}

				&:hover {
					border-color: $color-primary;
					background-color: $color-primary;

					.i-search {
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.order-wrap {

		.order {
			border: 1px solid #B0B0B0;
			margin-bottom: 20px;

			&.warning {
				border-color: $color-primary;

				.header-wrap {
					background-color: rgba($color-primary, .1);

					.status {
						color: $color-primary;
					}
				}
			}

			&.green {
				border-color: $color-success;

				.header-wrap {
					background-color: rgba($color-success, .1);

					.status {
						color: $color-success;
					}
				}
			}

			.header-wrap {
				padding: 15px 30px;
				border-bottom: 1px solid $border-color;

				.top {
					@extend %flex-align-center;
					justify-content: space-between;

					.status {
						color: #b0b0b0;
						font-size: 18px;
					}

					.btn-delete {
						margin-top: -15px;
						margin-right: -15px;
						cursor: pointer;

						.i-delete {
							font-size: 24px;
							color: #B0B0B0;
							opacity: 0;
						}
					}
				}

				.bottom {
					@extend %flex-align-center;
					justify-content: space-between;

					.left {
						color: #757575;
						max-width: 600px;
						@extend %flex-align-center;

						.separator {
							color: $border-color;
							margin: 0 .5rem;
						}

						.orderno {
							display: inline-block;

							&:hover {
								color: $color-primary;
							}
						}
					}

					.right {

						.desc {
							color: #757575;
						}

						.amount {
							font-size: 28px;
							color: $text-color;
							margin-right: 5px;
						}
					}
				}
			}

			.main-wrap {
				display: flex;
				justify-content: space-between;
				padding: 20px 30px;
				padding-bottom: 0;

				.left {
					padding: 10px 0;

					.goods {
						@extend %flex-align-center;
						margin-bottom: 10px;
						align-items: flex-start !important;
						.thumb {
							width: 80px;
							height: 80px;
						}

						.detail {
							margin-left: 20px;
							color: $text-color;
							line-height: 18px;
							.text{color: #999;font-size: 13px;margin: 5px 0;}
							.name {
								color: $text-color;
								display: inline-block;
								cursor: pointer;
								max-width: 500px;

								&:hover {
									color: $color-primary;
								}
							}

							.more {
								font-size: 13px;
								text{color: #e30000;margin-right: 5px;}
							}
						}
					}
				}

				.right {

					.btn {
						border: 1px solid #b0b0b0;
						background-color: $bg-color;
						color: #757575;
						width: 118px;
						height: 28px;
						font-size: 13px;
						line-height: 28px;
						text-align: center;
						cursor: pointer;
						transition: all .3s;
						margin-bottom: 10px;

						&.btn-primary {
							background-color: $color-primary;
							color: #FFFFFF;
							border-color: $color-primary;

							&:hover {
								background-color: $color-primary;
								color: #FFFFFF;
								border-color: $color-primary;
								opacity: .9;
							}
						}

						&:hover {
							color: #fff;
							background-color: #757575;
							border-color: #757575;
						}
					}
				}
			}

			&:hover {

				.header-wrap .top .btn-delete .icon {
					opacity: 1;
				}
			}
		}
	}

	.empty-tip {
		margin: 60px 0;
		font-size: 18px;
		text-align: center;
		color: #b0b0b0;
	}
</style>
